<template>
<view class="content">
		<!-- 搜索栏 -->
		<h-com-search></h-com-search>
		<!-- 排序标签 -->
		<h-com-tab :changeIndex="changeIndex" :tabName="TabName"></h-com-tab>
		<h-com-contentCigarBrands v-show="TabName[0].bool" :data1="data1"> </h-com-contentCigarBrands>
		<h-com-contentCigarBrands v-show="TabName[1].bool" :data1="data2"> </h-com-contentCigarBrands>
		<h-com-contentCigarBrands v-show="TabName[2].bool" :data1="data3"> </h-com-contentCigarBrands>
		<!-- <swiper v-show="style.TabName[0].bool" class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
			<swiper-item v-for="item in data1" :key="item.logoUrl">
				<h-com-contentCigarBrands
					:bannerLogoUrl="item.logoUrl" 
					:brandName="item.brandName"
					:nickName="item.nickName" 
					:content="item.content">
				</h-com-contentCigarBrands>
			</swiper-item>
		</swiper>
		<swiper v-show="style.TabName[1].bool" class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
			<swiper-item v-for="item in data2" :key="item.logoUrl">
				<h-com-contentCigarBrands
					:bannerLogoUrl="item.logoUrl" 
					:brandName="item.brandName"
					:nickName="item.nickName" 
					:content="item.content">
				</h-com-contentCigarBrands>
			</swiper-item>
		</swiper>
		<swiper v-show="style.TabName[2].bool" class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
			<swiper-item v-for="item in data3" :key="item.logoUrl">
				<h-com-contentCigarBrands
					:bannerLogoUrl="item.logoUrl" 
					:brandName="item.brandName"
					:nickName="item.nickName" 
					:content="item.content">
				</h-com-contentCigarBrands>
			</swiper-item>
		</swiper> -->
	<!-- 	<view class=""> -->
			<!-- 这里原先使用<view>标签 -->
		<!-- 	<ul class="list-sort-bar posts-sort tabLength">
				<li @click="setTabBar(index)" v-for="(item,index) in style.TabName">
					<button :class="['sort-button',{selected:item.bool}]">{{item.name}}</button>
				</li>
			</ul>
		</view> -->

		<!-- 2月23日 -->
		
		<!-- <view class=""> -->
			<!-- v-for="(item,index) in style.TabName"-->
			<!-- 雪茄品牌内容 -->
			<!-- <view class="" v-show="style.TabName[0].bool">
				<h-com-contentCigarBrands 
				:bannerList="data"
				:bannerLogoUrl="state.logoUrl" 
				:brandName="state.brandName"
				:nickName="state.nickName" 
				:content="state.content"></h-com-contentCigarBrands>
			</view>
			<view class="" v-show="style.TabName[1].bool">
				<h-com-contentCigarBrands
				:bannerList="data"
				:bannerLogoUrl="stateChina.logoUrl" 
				:brandName="stateChina.brandName"
				:nickName="stateChina.nickName" 
				:content="stateChina.content"></h-com-contentCigarBrands>
			</view>
			<view class="" v-show="style.TabName[2].bool">
				<h-com-contentCigarBrands
				:bannerList="data"
				:bannerLogoUrl="stateArchaic.logoUrl" 
				:brandName="stateArchaic.brandName"
				:nickName="stateArchaic.nickName" 
				:content="stateArchaic.content"></h-com-contentCigarBrands>
			</view> -->
		 <!-- </view> -->
		 
	</view>
</template>
<script setup lang="ts">
	import {
		HttpMethod,
		httpUtil
	} from "@/common/netWork/httpUtil"
	import type {
		ICigarBrand
	} from "@/logic/globInterface/dataInterface"
	import {
		HTTP_API_URL
	} from '@/common/consts/Consts'
	import {
		onMounted,
		reactive,
		ref
	} from 'vue';
	import Tool from "@/common/utils/Tool";
import { onLoad } from "@dcloudio/uni-app";
	
	interface TABNAME {
		id:number
		name:string
		bool:boolean
	}
	
	const state = reactive({} as ICigarBrand)
	const stateChina = reactive({} as ICigarBrand)
	const stateArchaic = reactive({} as ICigarBrand)
	let data1 = ref([] as Array<ICigarBrand>)
	let data2 = ref([] as Array<ICigarBrand>)
	let data3 = ref([] as Array<ICigarBrand>)
	let TabName = ref([] as Array<TABNAME>)
	// let style = reactive({
	// 	bool:false,
	// 	TabName:  Array<TABNAME>,
	// 		{
	// 			id: 0,
	// 			name: '古巴雪茄',
	// 			bool: true
	
	// 		},
	// 		{
	// 			id: 1,
	// 			name: '中国雪茄',
	// 			bool: false
	// 		},
	// 		{
	// 			id: 2,
	// 			name: '非古雪茄',
	// 			bool: false
	// 		},
		// ],
		// brandType:''
	// })
	
	//加载home主页面数据
	async function loadCubaData() {
		let res = await httpUtil.request(HTTP_API_URL.MSG_BRANDSERIES,HttpMethod.POST,{"brandType":"100"});
		JSON.parse(res.data).forEach((item:any)=>{
			switch (item.brandType){
				case 0:
					data1.value.push(item)
					break
				case 1:
					data2.value.push(item)
					break
				case 2:
					data3.value.push(item)
					break
			}
		})
		let i = 0
		let xjName = ''
		JSON.parse(res.data).map((item:any)=>{
			if(item.brandType == i){
				if(i===0){
					xjName = '古巴雪茄'
				}else if(i===1){
					xjName = '中国雪茄'
				}else if(i===2){
					xjName = '非古雪茄'
				}
				TabName.value.push({
					id:i,
					name:xjName,
					bool:!i
				})
				i++
				console.log(i)
			}
		})
		console.log(JSON.parse(res.data))
		console.log('data1',data1)
		console.log('data2',data2)
		console.log('data3',data3)
		Tool.buildInitProp(data1, state);   
		Tool.buildInitProp(data2, stateChina)
		Tool.buildInitProp(data3, stateArchaic)
	}
	
	// onMounted(async () => {
	// 	await loadCubaData()
	// 	 // console.log("进来啦");
	// })
	onLoad(()=>{
		loadCubaData()
		console.log(TabName.value)
	})
	//tab选项卡
	function setTabBar(key: any) {
		for (let i = 0; i < TabName.value.length; i++) {
			TabName.value[i].bool = false
			if (i == key) {
				// loadCubaData(key)
				TabName.value[key].bool = true
			}
		}
	}
	function changeIndex (index:any) {
		setTabBar(index)
		console.log(index)
	}
</script>
<style scoped>
/* 	.tabLength {
		list-style-type: none;
		justify-content: flex-start;
	}
	::v-deep .swiper{
		height: 450px;
	} */
</style>